<template>
  <div class="application-list">
    <tab :line-width="2" default-color="#666" active-color="#fc476d" v-model="tabIndex" custom-bar-width="2.5rem">
      <tab-item v-for="(item, index) in tabItemArr" :key="index" :selected="selectItem === item" @click.native="changeTab(index)">
        {{item}}
      </tab-item>
    </tab>
    <div class="loading-box" v-show="loadingShow">
      <div>
        <spinner type="android"></spinner> 数据加载中...
      </div>
    </div>
    <swiper :show-dots="false" :min-moving-distance="9999" v-model="tabIndex" height="100%" v-show="!loadingShow">
      <swiper-item v-for="(item, index) in tabItemData" :key="index" :id="`appList-item-${index}`">
        <!-- <img :src="require('../../assets/images/defaultImg.png')" style="width: 100;">   -->
        <my-record-list class="tab-main-active tab-main"
        :toDoListData="item" :idName="`appList-item-${index}`"
        :ajaxUrl="ajaxUrl" :ajaxData="ajaxData[index]" ref="list">
        </my-record-list>
      </swiper-item>
    </swiper>
    <!-- 返回頂部 -->
    <div class="go-top" v-if="goTopShow" @click="goTop"></div>
  </div>
</template>

<script>
  import { Tab, TabItem, Swiper, SwiperItem, Spinner } from 'vux';
  import RecordList from '@/components/RecordList/RecordList.vue';
  import { applyList } from '@/axios/config.js';
  import { scrollTo } from '@/assets/js/wechat.js';
  export default {
    name: 'ApplicationList',
    components: {
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      Spinner,
      'my-record-list': RecordList
    },
    data () {
      return {
        tabIndex: 0,
        selectItem: '全部',
        tabItemArr: ['全部', '审批中', '已审批', '已驳回', '已取消','已查阅'],
        tabItemData: [],
        loadingShow: true,
        goTopShow: false,
        ajaxUrl: '/Process/QueryByCreated',
        ajaxData: [
          {
          },
          {
            'Status': '1'
          },
          {
            'Status': '2'
          },
          {
            'Status': '3'
          },
          {
            'Status': '5'
          },
          {
            'Status': '2'
          }
        ]
      };
    },
    watch:{
      $route (to, from) {
        if(from.name === 'InitiateApplication' && to.name === 'ApplicationList'){
          this.$route.meta.keepAlive = false;
        }else if(from.name === 'ApplicationDetail' && to.name === 'ApplicationList'){
          this.$route.meta.keepAlive = true;
          this.getTabItemData();
        }
      }
    },
    methods: {
      getTabItemData: function () {
        // 全部數據
        applyList(this, '/Process/QueryByCreated', {}, 'tabItemData[0]', this.loadingHide);
        // // 待審批數據
        applyList(this, '/Process/QueryByCreated', { 'Status': '1' }, 'tabItemData[1]');
        // // 已審批數據
        applyList(this, '/Process/QueryByCreated', { 'Status': '2' }, 'tabItemData[2]');
        // // 已駁回數據
        applyList(this, '/Process/QueryByCreated', { 'Status': '3' }, 'tabItemData[3]');
        // // 已取消數據
        applyList(this, '/Process/QueryByCreated', { 'Status': '5' }, 'tabItemData[4]');
        // 已查阅
        applyList(this, '/Process/QueryByCreated', { 'Status': '7' }, 'tabItemData[5]');
      },
      loadingHide: function () {
        this.loadingShow = false;
        this.changeTab(0);
      },
      changeTab: function (index) {
        if (this.$refs.list[index].listData.length >= 8) {
          this.goTopShow = true;
          return false;
        }
        this.goTopShow = false;
      },
      goTop: function () {
        let thisScroll = document.querySelector(`#appList-item-${this.tabIndex}`);
        // thisScroll.scrollTop = 0;
        scrollTo(thisScroll, 0, 200);
      }
    },
    mounted () {
      this.getTabItemData();
    },
    beforeRouteLeave(to,from,next){
      if(to.name === 'ToDoList'){
        to.meta.keepAlive = true
      }
      next()
    }
  };
</script>

<style scoped lang="scss">
  @import '../../assets/style/variable';
  .application-list{
    padding-top: 88px;
    padding-bottom: getRem(98);
    .go-top{
      width: getRem(90);
      height: getRem(90);
      position: fixed;
      bottom: getRem(200);
      right: getRem(30);
      background: #fa5864 url(../../assets/images/gotop.png) no-repeat center center;
      background-size: getRem(64) getRem(64);
      z-index: 1;
      border-radius: 9999px;
    }
  }
  .application-list .vux-tab-wrap .vux-tab-item{
    flex: 0 0 16.66666666666667%;
  }
</style>
